<template>
<div id="map"></div>
</template>

<script>
import "ol/ol.css";
import {
    Map,
    View
} from "ol";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import HeatmapLayer from 'ol/layer/Heatmap';
import VectorSource from "ol/source/Vector";
import GeoJSON from 'ol/format/GeoJSON';
import OSM from "ol/source/OSM";
import {
    Fill,
    Stroke,
    Style
} from 'ol/style';
import bus from '@/bus.js';

export default {
    props: ["sendMsgToSon"],
    data() {
        return {
            osmLayer: new TileLayer({
                source: new OSM(),
                visible: true,
                zIndex: 1,
            }),
            gridLayer: new VectorLayer({
                source: new VectorSource({
                    format: new GeoJSON(), //解析格式
                    url: 'http://120.24.111.99:8080/geoserver/myworkspace/ows?' +
                        'service=WFS&' + //服务类型
                        'version=1.0.0&' + //版本
                        'request=GetFeature&' + //请求类型
                        'typeName=myworkspace%3Astates&' + //图层名
                        'outputFormat=application%2Fjson' //输出格式
                }),
                style: function (feature) { //分级色彩
                    var value = feature.get("value");
                    var style = null;
                    if (value == 0) {
                        style = new Style({
                            stroke: new Stroke({
                                color: 'rgba(0, 0, 0, 0.6)',
                                width: 0.8,
                            })
                        });
                    } else if (value > 0 && value < 10.8) {
                        style = new Style({
                            stroke: new Stroke({
                                color: 'rgba(0, 0, 255, 0.6)',
                                width: 0.8,
                            }),
                            fill: new Fill({
                                color: 'rgba(0,0,255,0.2)'
                            })
                        });
                    } else if (value >= 10.8 && value < 21.6) {
                        style = new Style({
                            stroke: new Stroke({
                                color: 'rgba(255,128,0, 0.6)',
                                width: 0.8,
                            }),
                            fill: new Fill({
                                color: 'rgba(255,128,0,0.4)'
                            })
                        });
                    } else {
                        style = new Style({
                            stroke: new Stroke({
                                color: 'rgba(255,0,0, 0.6)',
                                width: 0.8,
                            }),
                            fill: new Fill({
                                color: 'rgba(255,0,0,0.6)'
                            })
                        });
                    }
                    return style;
                },
                visible: false,
                zIndex: 2
            }),
            startPointHeatMap: new HeatmapLayer({
                source: new VectorSource({
                    format: new GeoJSON(), //解析格式
                    url: 'http://120.24.111.99:8080/geoserver/myworkspace/ows?' +
                        'service=WFS&' + //服务类型
                        'version=1.0.0&' + //版本
                        'request=GetFeature&' + //请求类型
                        'typeName=myworkspace%3Aorders&' + //图层名
                        'outputFormat=application%2Fjson' //输出格式
                }),
                blur: 12,
                radius: 2,
                visible: false,
                zIndex: 3
            }),
            map: null,
            show_gridLayer: this.sendMsgToSon
        }
    },
    methods: {
        initMap() {
            this.map = new Map({
                target: 'map',
                layers: [this.osmLayer, this.gridLayer, this.startPointHeatMap],
                view: new View({
                    projection: 'EPSG:4326',
                    center: [104.07, 30.67],
                    zoom: 11
                })
            });
        }
    },
    created() {
        // 定义事件,注意箭头函数应用
        bus.$on('func', data => {
                this.gridLayer.setVisible(data);
            }),

            bus.$on("isShowStartPointGridDensity", data => {
                console.log(data);
            })
    },
    mounted() {
        this.initMap();
        bus.$on("isShowStartPointHeatMap", data => {
                this.startPointHeatMap.getSource().once('change', evt => {
                    if (evt.target.getState() === 'ready') {
                        bus.$emit('func1', false);
                        // startPointHeatMap.getSource().un(listenerKey); //注销监听器
                    }
                })
                this.startPointHeatMap.setVisible(data);
            }),
            console.log('mounted');
    },

}
</script>

<style scoped>
#map {
    width: 100%;
    height: 100%;
}
</style>
